<style>	
	.frame::after {
		content: "Login：";
	}
	
	.bg {
		background-repeat: no-repeat;
		background-size: cover;
		transition: bottom .3s ease-out 1.7s;
		background-position-x: 50%;
		background-position-y: 30%;
		background-image: url(/img/bg/<%= locals.bg.url%>);
	}
	
	button {
		width: 80px;
		margin: 0 10px;
	}
	
	body > section{
		text-align: -webkit-center;
	}
</style>

<div class="frame">
	<form class="form-horizontal" id="form1" action="/login" method="post">
		<div class="form-group">
			<div class="col-xs-2"><label>Username</label></div>
			<div class="col-xs-10"><input type="text" class="form-control" placeholder="Username" name="username"></div>
		</div>
		<div class="form-group">
			<div class="col-xs-2"><label>Password</label></div>
			<div class="col-xs-10"><input type="password" class="form-control" placeholder="password" name="password"></div>
		</div>
		<p class="tips">
			<%= locals.error%>
		</p>
		<div style="text-align: center;">
			<button type="reset" class="btn btn-danger">Reset</button>
			<button type="submit" class="btn btn-primary">Submit</button>
		</div>
	</form>
</div>
<script>
	//JSON.stringify()
	$("#form1").validate({
		rules: {
			username: {
				required: true
			},
			password: {
				required: true
			},
		}
	});

	$("body").addClass("bg");
	$("body > header").text("");
</script>